<template>
    <div class="future-waether">
      <div>
        <div>今日PM 2.5：{{values[0]}}</div>
        <div>今日PM 10：{{values[1]}}</div>
        <div>今日NO2：{{values[2]}}</div>
        <div>今日O3：{{values[3]}}</div>
        <div>今日SO2：{{values[4]}}</div>
      </div>
      <div class="chart-container"  id="container" ></div>
    </div>
  </template>
<script>
import * as echarts from 'echarts/core';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([GaugeChart, CanvasRenderer]);
import axios  from 'axios';
import{KEY}from"../common/constrant";
import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState([
            "location"
        ])
    },
    data(){
        return{
            aqi:"",
            pollutants:[],
            values:[]
        }
    },
    methods:{
        getData(){
            axios
                .get("https://devapi.qweather.com/airquality/v1/current/"+this.location.lat+"/"+this.location.lon,{
                    params:{ 
                        key:KEY,
                    },
                })
                .then((res)=>{
                    console.log(res.data)
                    this.aqi = res.data.indexes[0].aqiDisplay
                    this.pollutants = res.data.pollutants
                    console.log(this.pollutants)
                    this.pollutants.forEach(element=>{
                        this.values.push(element.__ob__.value.concentration.value)
                    })
                    console.log(this.values)
                    this.initChart(this.aqi)
                })
        },
        initChart(val){
            var chartDom = document.getElementById('container');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        series: [
            {
            type: 'gauge',
            startAngle: 225,
            endAngle: -45,
            center: ['50%', '50%'],
            radius: '40%',
            min: 0,
            max: 250,
            splitNumber: 5,
            axisLine: {
                lineStyle: {
                width: 6,
                color: [
                    [0.2, '#7CFFB2'],
                    [0.4, '#58D9F9'],
                    [0.6, '#FDDD60'],
                    [0.8, '#FF6E76'],
                    [1, '#BA55D3']
                ]
                }
            },
            pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '12%',
                width: 22,
                offsetCenter: [0, '-60%'],
                itemStyle: {
                color: 'auto'
                }
            },
            axisTick: {
                length: 12,
                lineStyle: {
                color: 'auto',
                width: 2
                }
            },
            splitLine: {
                length: 20,
                lineStyle: {
                color: 'auto',
                width: 5
                }
            },
            axisLabel: {
                color: '#464646',
                fontSize: 18,
                distance: -60,
                rotate: 'tangential',
                formatter: function (value) {
                if (value == 0) {
                    return '优';
                } else if (value <= 50) {
                    return '良';
                } else if (value <= 100) {
                    return '轻度污染';
                } else if (value <= 150) {
                    return '中度污染';
                } else if (value <= 200) {
                    return '重度污染';
                }
                return '';
                }
            },
            title: {
                offsetCenter: [0, '10%'],
                fontSize: 20
            },
            detail: {
                fontSize: 30,
                offsetCenter: [0, '-10%'],
                valueAnimation: true,
                formatter: function (value) {
                return Math.round(value) + '';
                },
                color: 'inherit'
            },
            data: [
                {
                value: val,
                name: '空气污染指数'
                }
            ]
            }
        ]
};

option && myChart.setOption(option);
        }
    },
    mounted(){
    this.getData();
    this.initChart();
  },watch:{
    location:function(){
      this.getData();
    }
  }

}
</script>
<style scoped>
.chart-container{
  height: 45rem;
  width: 45rem;
  text-align: center;
}
</style>